@import url('../../utils/less/base.less');

.page {
    .overflow-hidden();

    &>.avatar {
        .bgimg(cover, center);
        .radius(50%);
        .relative();
        margin: 60rpx auto;
        width: 150rpx;
        height: 150rpx;

        &>.choose-avatar {
            .absolute(br);
            .radius(50%);
            .bgcolor(#eee);
            .flex-center(center);
            padding: 0;
            width: 50rpx;
            height: 50rpx;

            &>.replace-icon {
                display: block;
                width: 30rpx;
                height: 30rpx;
            }
        }
    }

    &>.nickname {
        .flex-start(center);
        .text(32rpx);
        padding: 12rpx 32rpx;
        &>.title {
            .flex(none);
            .text(right);
            width: 180rpx;
        }
        &>.input {
            .bgcolor(#eee);
            padding: 10rpx 24rpx;
            border-bottom: 2rpx solid #ddd;
        }
    }

    &>.phone {
        .flex-start(center);
        .text(32rpx);
        padding: 12rpx 32rpx;
        &>.title {
            .flex(none);
            .text(right);
            width: 180rpx;
        }
        &>.input {
            .bgcolor(#eee);
            padding: 10rpx 24rpx;
            border-bottom: 2rpx solid #ddd;
        }
    }

    &>.submit {
        .bgcolor(#3690f7);
        .text(32rpx, white);
        .radius(12rpx);
        .flex-center(center);
        width: 300rpx;
        height: 80rpx;
        margin: 40rpx auto;
    }
}

.key-bord {
    & .phone-button-row {
        .bgcolor(#eee);
        padding: 20rpx;
        & .phone-button {
            .bgcolor(#fff);
            padding: 30rpx 0;
            font-size: 32rpx;
            font-weight: 400;
        }
    }
}

